<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事故信息录入</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">

    <link rel="stylesheet" href="../layui/css/layui.css" media="all" />
    <link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css">
</head>
<body>
<div style="margin: 15px;">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>事故信息录入</legend>
    </fieldset>

    <form class="layui-form" action="" method="post" enctype="multipart/form-data" >
        <div class="layui-form-item">
           <div class="layui-inline">
               <label class="layui-form-label">事故编号</label>
               <div class="layui-input-block">
                   <input type="text" name="accidentId" lay-verify="required" autocomplete="off" placeholder="请输入事故编号" class="layui-input accidentId">
               </div>
           </div>

           <div class="layui-inline">
               <label class="layui-form-label">事故名称</label>
               <div class="layui-input-block">
                   <input type="text" name="accidentName" lay-verify="required" autocomplete="off" placeholder="请输入事故名称" class="layui-input accidentName">
               </div>
           </div>
        </div>
        <div class="layui-form-item">
           <div class="layui-inline">
               <label class="layui-form-label">船舶编号</label>
               <div class="layui-input-block">
                   <input type="text" name="boatId" lay-verify="required" placeholder="请输入船舶编号" autocomplete="off" class="layui-input">
               </div>
           </div>
            <div class="layui-inline">
                <label class="layui-form-label">船舶名称</label>
                <div class="layui-input-block">
                    <input type="text" name="boatName" lay-verify="required" placeholder="请输入船舶名称" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-form-item">

            <div class="layui-inline">
                <label class="layui-form-label">经度</label>
                <div class="layui-input-block">
                    <input type="text" name="lng" lay-verify="lng" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">纬度</label>
                <div class="layui-input-block">
                    <input type="text" name="lat" lay-verify="lat" autocomplete="off" class="layui-input">
                </div>
            </div>

        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">能见度</label>
            <div class="layui-input-block">
                <select name="distance" lay-filter="distance">
                    <option value="">请选择</option>
                    <option value="0">等级0：能见距离<0.03海里，能见度低劣</option>
                    <option value="1">等级1：能见距离0.03-0.10海里，能见度低劣</option>
                    <option value="2">等级2:能见距离0.10-0.25海里，能见度低劣</option>
                    <option value="3">等级3:能见距离0.25-0.50海里，能见度不良</option>
                    <option value="4">等级4:能见距离0.50-1.00海里，能见度不良</option>
                    <option value="5">等级5:能见距离1.00-2.00海里，能见度中等</option>
                    <option value="6">等级6:能见距离2.00-5.00海里，能见度中等</option>
                    <option value="7">等级7:能见距离5.00-11.00海里，能见度良好</option>
                    <option value="8">等级8:能见距离11.00-27.00海里，能见度很好</option>
                    <option value="9">等级9:能见距离≥27海里，能见度极好</option>

                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">风向</label>
            <div class="layui-input-inline">
                <select name="direction">
                    <option value="">请选择</option>
                    <option value="0">西北风</option>
                    <option value="1">西风</option>
                    <option value="2">西南风</option>
                    <option value="3">南风</option>
                    <option value="4">东南风</option>
                    <option value="5">东风</option>
                    <option value="6">东北风</option>
                    <option value="7">北风</option>
                </select>
            </div>

            <label class="layui-form-label">风力大小</label>
            <div class="layui-input-inline">
                <select name="wind" >
                    <option value="">请选择</option>
                    <option value="0">等级0：无风</option>
                    <option value="1">等级1：软风</option>
                    <option value="2">等级2：轻风</option>
                    <option value="3">等级3：微风</option>
                    <option value="4">等级4：和风</option>
                    <option value="5">等级5：清风</option>
                    <option value="6">等级6：强风</option>
                    <option value="7">等级7：劲风</option>
                    <option value="8">等级8：大风</option>
                    <option value="9">等级9：烈风</option>
                    <option value="10">等级10：狂风</option>
                    <option value="11">等级11：暴风</option>
                    <option value="12">等级12：台风</option>
                    <option value="13">等级13：轻微龙卷风</option>
                    <option value="14">等级14：中等龙卷风</option>
                    <option value="15">等级15：超大龙卷风</option>
                    <option value="16">等级16：极大龙卷风</option>
                    <option value="17">等级17：强台龙卷风</option>
                    <option value="18">等级18：龙卷风之王</option>
                </select>
            </div>

            <label class="layui-form-label">海浪大小</label>
            <div class="layui-input-inline">
                <select name="wave">
                    <option value="">请选择</option>
                    <option value="0">等级0：海面如镜</option>
                    <option value="1">等级1：微波</option>
                    <option value="2">等级2：小波</option>
                    <option value="3">等级3：轻浪</option>
                    <option value="4">等级4：中浪</option>
                    <option value="5">等级5：大浪</option>
                    <option value="6">等级6：巨浪</option>
                    <option value="7">等级7：狂浪</option>
                    <option value="8">等级8：怒浪</option>
                    <option value="9">等级9：凶涛</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">温度</label>
            <div class="layui-input-inline">
                <input type="text" name="temperature" autocomplete="off" class="layui-input">
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">事故日期</label>
                <div class="layui-input-block">
                    <input type="text"   lay-verify="date" placeholder="yyyy-mm-dd" autocomplete="off" class="layui-input accidentTime">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">救助及时？</label>
            <div class="layui-input-inline">
                <input type="radio" name="timely" value="是" title="及时" checked="">
                <input type="radio" name="timely" value="否" title="不及时">
            </div>

            <label class="layui-form-label">救助成功？</label>
            <div class="layui-input-inline">
                <input type="radio" name="successly" value="是" title="成功" checked>
                <input type="radio" name="successly" value="否" title="不成功">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">事故图片</label>
            <div class="layui-input-block">

                <button type="button" class="layui-btn" id="picture">
                    <i class="layui-icon">&#xe62f;</i>上传图片
                </button>
                <div class="layui-upload-list">
                    <img class="layui-upload-img" id="demo1">
                    <p id="demoText"></p>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">事故类型</label>
            <div class="layui-input-inline">
                <select name="accidentKind" class="accidentKind" lay-verify="required">
                    <option value="">请选择</option>
                    <option value="0">碰撞事故</option>
                    <option value="1">搁浅事故</option>
                    <option value="2">触礁事故</option>
                    <option value="3">触损事故</option>
                    <option value="4">浪损事故</option>
                    <option value="5">火灾、爆炸事故</option>
                    <option value="6">风灾事故</option>
                    <option value="7">自沉事故</option>
                    <option value="8">其他事故</option>
                </select>
            </div>

            <label class="layui-form-label">事故等级</label>
            <div class="layui-input-inline">
                <select name="accidentType" >
                    <option value="">请选择</option>
                    <option value="0">小事故</option>
                    <option value="1">一般事故</option>
                    <option value="2">大事故</option>
                    <option value="3">重大事故</option>
                    <option value="4">特大事故</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">信息来源</label>
            <div class="layui-input-block">
                <select name="from">
                    <option value="">请选择</option>
                    <option value="0">事故发生地点的航政管理当局</option>
                    <option value="1">卷入事故的船舶的所属航运单位</option>
                    <option value="2">当事船舶投保的海事保险机构</option>
                    <option value="3">授权调查处理或仲裁、审理事故案件的行政部门与司法部门</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">事故描述</label>
            <div class="layui-input-block">
                <textarea placeholder="请输入内容" class="layui-textarea"></textarea>
            </div>
        </div>
        <!--<div class="layui-form-item layui-form-text">
            <label class="layui-form-label">编辑器</label>
            <div class="layui-input-block">
                <textarea class="layui-textarea layui-hide" name="content" lay-verify="content" id="LAY_demo_editor"></textarea>
            </div>
        </div>-->
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit="" lay-filter="addAccident">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
<script src="../js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="../layui/layui.js"></script>
<script src="../js/accident_add.js"></script>
<script>
    layui.use(['form', 'layedit', 'laydate'], function() {
        var form = layui.form,
                layer = layui.layer,
                layedit = layui.layedit,
                laydate = layui.laydate;
        laydate.render({
            elem:'.accidentTime',
//            type:'year',
//            range:true
            max:'2018-12-31'
        });
        //创建一个编辑器
        var editIndex = layedit.build('LAY_demo_editor');
        //自定义验证规则
        form.verify({
            title: function(value) {
                if(value.length < 5) {
                    return '标题至少得5个字符啊';
                }
            },
            pass: [/(.+){6,12}$/, '密码必须6到12位'],
            content: function(value) {
                layedit.sync(editIndex);
            }
        });

        //监听提交
        form.on('submit(accident_add_form)', function(data) {
            /*layer.alert(JSON.stringify(data.field), {
                title: '最终的提交信息'
            })*/
            var index = top.layer.msg('数据提交中，请稍候',{icon: 16,time:false,shade:0.8});
            setTimeout(function(){
                top.layer.close(index);
                top.layer.msg("事故信息添加成功！");
                layer.closeAll("iframe");
                //刷新父页面
                parent.location.reload();
            },2000);
            return false;
        });


    });
</script>

<script>
    <!--图片上传-->
    layui.use(['upload'], function(){
        var upload = layui.upload;

        //执行实例
        var uploadInst = upload.render({
            elem: '#picture' //绑定元素
            ,url: '/upload/' //上传接口
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
            }
            ,done: function(res){
                //如果上传失败
                if(res.code > 0){
                    return layer.msg('上传失败');
                }
                //上传成功
                //上传完毕回调
            }
            ,error: function(){
//                演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
                //请求异常回调
            }
        });
    });


</script>
</body>
</html>